<template>
  <div class="homeBox">
    <el-container style="height: 100%">
      <!-- <el-header>

      </el-header> -->
      <el-container>
        <el-aside class="test" style="width: 200px">
          <div class="el-menu-div">
            <el-menu
              :defalt-active="$route.path"
              router
              class="el-menu-demo"
              text-color="#fff"
              active-text-color="#ffd04b"
              @open="handleOpen"
              @close="handleClose"
              @unique-opened="true"
            >
              <el-menu-item index="/Menu" icon="el-icon-share"
              >首页
              </el-menu-item
              >
              <el-submenu index="/Api">
                <template slot="title">
                  <i class="el-icon-share"></i>
                  <span>接口自动化</span>
                </template>
                <el-menu-item index="/Project" class="el-menu-li"
                >项目管理
                </el-menu-item
                >
                <el-menu-item index="/Api" class="el-menu-li"
                >接口管理
                </el-menu-item
                >
                <el-menu-item index="/TestCase" class="el-menu-li"
                >用例管理
                </el-menu-item
                >
                <el-menu-item index="/GroupPage" class="el-menu-li"
                >用例集管理
                </el-menu-item
                >
                <el-menu-item index="/HexSend" class="el-menu-li"
                >hex发送测试
                </el-menu-item
                >
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-service" />
                  <span>UI自动化</span>
                </template>
                <el-menu-item index="/UITestCase" class="el-menu-li">UI用例管理</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-notebook-1"/>
                  <span>任务计划</span>
                </template>
                <el-menu-item index="/task" class="el-menu-li">执行任务管理</el-menu-item>
                <el-menu-item index="/report" class="el-menu-li">报表管理</el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span>配置</span>
                </template>
                <el-menu-item index="/dbConnection" class="el-menu-li"
                >数据库管理
                </el-menu-item
                >
                <el-menu-item index="/env" class="el-menu-li"
                >环境管理
                </el-menu-item
                >
                <el-menu-item index="/envParams" class="el-menu-li"
                >环境参数管理
                </el-menu-item
                >
                <el-menu-item index="/mqttTest" class="el-menu-li"
                >mqtt测试
                </el-menu-item
                >
                <el-menu-item index="4-4" class="el-menu-li"
                >微服务日志
                </el-menu-item
                >
              </el-submenu>
            </el-menu>
          </div>
        </el-aside>
        <el-main>
          <div style="height: 60px">
            <el-row>
              <el-col :span="20">
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item
                    v-for="(item, index) in breadcrumb"
                    :key="index"
                  >
                    {{ item.meta.title }}
                  </el-breadcrumb-item>
                </el-breadcrumb>
              </el-col>
              <el-col :span="4">
                <home-header></home-header>
              </el-col>
            </el-row>
          </div>
          <div>
            <router-view></router-view>
          </div>
<!--          <div>-->
<!--            <div v-for="message in messages" :key="message.id">-->
<!--              {{ message }}-->
<!--            </div>-->

<!--            <el-input v-model="inputMessage" placeholder="请输入消息内容"></el-input>-->
<!--            <el-button @click="sendMessage()">发送</el-button>-->
<!--          </div>-->
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>


<script>
  import HomeHeader from "./HomeHeader.vue";
  import {Message} from 'element-ui';

  export default {
    data() {
      return {
        breadcrumb: "",
        socket: null,
        messages: [],
        inputMessage: '',
      };
    },
    components: {
      HomeHeader,
    },
    created() {
      this.getRoute();
    },
    mounted() {
      var userId = this.$store.getters.getUserId;
      var url = process.env.baseUrl+userId;
// 创建WebSocket连接
      this.socket = new WebSocket(url);

      // 监听WebSocket事件
      this.socket.onopen = () => {
        console.log('WebSocket连接已建立');
      };

      this.socket.onmessage = (event) => {
        // 收到消息时更新receivedMessages数组
        this.messages.push(event.data);
      };

      this.socket.onclose = () => {
        console.log('WebSocket连接已关闭');
      };

      this.socket.onerror = (error) => {
        console.error('WebSocket发生错误:', error);
      };
    },
    watch: {
      $route: function (to, from) {
        this.getRoute();
        console.log(this.$route);
      },
    },

    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      getRoute() {
        this.breadcrumb = this.$route.matched.filter((item) => {
          return item.meta;
        });
      },
      sendMessage() {
        if (this.inputMessage.trim() !== '') {
          this.socket.send(this.inputMessage);
          this.inputMessage = '';
        } else {
          Message.warning('请输入消息内容');
        }
      }
    },
  };
</script>
<style>
  html,
  body,
  .homeBox {
    height: 100%;
    padding: 0px;
    margin: 0px;
  }

  .test,
  .el-menu {
    background-color: #545c64;
  }
</style>
